<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=no    ">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/demo.css">
    <title>Demo</title>
</head>

<body>
    <!-- header -->
    <header class="clearfix">
        <div class="logo fl"><img src="./img/logo.png" alt=""></div>

        <div class="cityBar fr">
            <select name="" id="">
                <option value="">广州市</option>
                <option value="">深圳市</option>
            </select>
        </div>

        <div class="searchBar">
            <input type="text">
            <input type="image" src="./img/fangdajing.png">
        </div>

    </header>

    <!-- #main -->
    <div id="main">

    </div>
    <!-- footer -->
    <footer>
        <div class="menu">
            <div class="menu_area">
                <a href="#">
                    <div class="menu_img"><img src="./img/home.png" alt="" class="img_processing"></div>
                    <div class="menu_name"><p>我的</p></div>
                </a>
            </div>
            <div class="menu_area">
                <a href="#">
                    <div class="menu_img"><img src="./img/class.png" alt="" class="img_processing"></div>
                    <div class="menu_name"><p>发现</p></div>
                </a>
            </div>
            <div class="menu_area">
                <a href="#">
                    <div class="menu_img"><img src="./img/discover.png" alt="" class="img_processing"></div>
                    <div class="menu_name"><p>分类</p></div>
                </a>
            </div>
            <div class="menu_area">
                <a href="">
                    <div class="menu_img"><img src="./img/person.png" alt="" class="img_processing"></div>
                    <div class="menu_name"><p>首页</p></div>
                </a>
            </div>
        </div>
    </footer>

    <script>


        document.body.style.height = window.innerHeight + "px";

        /*动态改变根元素字体大小*/
        function recalc() {
            // 获取客户端宽度
            var clientWidth = document.documentElement.clientWidth;
            if (!clientWidth) return;
            // 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
            document.documentElement.style.fontSize = 100 * (clientWidth / 750) + 'px';

        }

        function initRecalc() {
            recalc();
            // if(浏览器支持横竖屏切换的事件){横竖屏事件}else{ resize事件 }
            var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
            if (!document.addEventListener) return;
            window.addEventListener(resizeEvt, recalc, false);
            document.addEventListener('DOMContentLoaded', recalc, false);
        }
        initRecalc();



    </script>
</body>

</html>